<template>
  <div class="row-main">
    <div class="title">{{ bigTitle }}</div>
    <div class="row">
      <div class="row-item" v-for="item in row" :style="{ ...styleCss }">
        <span>{{ item.value }}</span>
        <span>{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, computed } from "vue";

interface Props {
  row?: Array<{
    title: string;              //显示的下面标题
    value: string | number;     //显示的上面值
  }>;
  bigTitle?: string;  //大标题
  width?: string;     //宽度
}

const props = withDefaults(defineProps<Props>(), {
  row: () => [],
  bigTitle: "",
  width: undefined,
});

const styleCss = computed(() => {
  return props.width ? { width: props.width } : { flex: 1 };
});
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}
</style>
